<template>
  <div class="home_box">
    <el-container>
      <el-header class="home_hd">
        <navModule :dataList="navDataList" @selectPath="selectPathClick"></navModule>
      </el-header>
      <el-container class="home_ct">
        <div class="home_aside">
          <vue-scroll ref="vs" :ops="$store.state.ops">
            <menuModule :dataList="asideDataList" @click="menuClick" :isCollapse="isCollapse"></menuModule>
          </vue-scroll>
        </div>
        <div class="home_main">
          <div class="home_main_bd">
            <router-view></router-view>
          </div>
        </div>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import menuModule from "./../components/main/menuModule";
import navModule from "./../components/main/navModule";
export default {
  components: {
    menuModule,
    navModule
  },
  data() {
    return {
      isCollapse: true,
      isShowCollapse: 1,
      crumbList: [],
      asideDataList: [],
      navDataList: [],
      // 补充数据
      conListroles: {}
    };
  },
  filters: {},
  created: function() {
    this.routeFun();
  },
  watch: {},
  computed: {},
  methods: {
    /* 顶部导航  start */
    selectPathClick(path) {
      if (path.indexOf("/shop") > -1) {
        this.asideDataList = this.conListroles.SHOP;
      }
      if (path.indexOf("/system") > -1) {
        this.asideDataList = this.conListroles.SYSTEM;
      }
      if (path.indexOf("/menber") > -1) {
        this.asideDataList = this.conListroles.MENBER;
      }
      if (path.indexOf("/operation") > -1) {
        this.asideDataList = this.conListroles.OPERATION;
      }
      this.$router.push({
        path: path
      });
    },
    /* 顶部导航  end */
    /* router 处理  start */
    routeFun() {
      let self = this;
      this.conListroles = {
        SHOP: [
          {
            path: "/home/shop",
            title: "订单管理",
            icon: "icon-changguanyuyue",
            meta: {
              permission: ["01-01"]
            },
            isShow: false,
            isTransform: false,
            children: [
              {
                path: "/home/shop/allOrder/list",
                route: "/home/shop/allOrder/",
                title: "全部订单",
                icon: "icon-sanjiaoxingcopy",
                isShow: false,
                meta: {
                  permission: ["01-01"]
                }
              },
              {
                path: "/home/shop/afterOrder/list",
                route: "/home/shop/afterOrder/",
                title: "售后订单",
                icon: "icon-sanjiaoxingcopy",
                isShow: false,
                meta: {
                  permission: ["01-01"]
                }
              },
              {
                path: "/home/shop/safeguardOrder/list",
                route: "/home/shop/safeguardOrder/",
                title: "维权订单",
                icon: "icon-sanjiaoxingcopy",
                isShow: false,
                meta: {
                  permission: ["01-01"]
                }
              },
              {
                path: "/home/shop/evaluate/list",
                route: "/home/shop/evaluate/",
                title: "评价管理",
                icon: "icon-sanjiaoxingcopy",
                isShow: false,
                meta: {
                  permission: ["01-01"]
                }
              }
            ]
          },
          {
            path: "/home/product",
            title: "商品管理",
            icon: "icon-changguanyuyue",
            meta: {
              permission: ["01-01"]
            },
            isShow: false,
            isTransform: false,
            children: [
              {
                path: "/home/shop/allProduct/list",
                route: "/home/shop/evaluate/",
                title: "全部商品",
                icon: "icon-sanjiaoxingcopy",
                isShow: false,
                meta: {
                  permission: ["01-01"]
                }
              }
            ]
          }
        ],
        SYSTEM: [
          {
            path: "/home/system",
            title: "系统设置",
            icon: "icon-changguanyuyue",
            meta: {
              permission: ["01-02"]
            },
            isShow: false,
            children: [
              {
                path: "/home/system/role/list",
                route: "/home/system/role/",
                title: "角色管理",
                icon: "icon-sanjiaoxingcopy",
                isShow: false,
                meta: {
                  permission: ["01-02"]
                }
              }
            ]
          }
        ],
        MENBER: [
          {
            path: "/home/menber",
            title: "会员管理",
            icon: "icon-changguanyuyue",
            meta: {
              permission: ["01-02"]
            },
            isShow: false,
            children: [
              {
                path: "/home/menber/menber/list",
                route: "/home/menber/menber/",
                title: "会员管理",
                icon: "icon-sanjiaoxingcopy",
                isShow: false,
                meta: {
                  permission: ["01-02"]
                }
              }
            ]
          }
        ],
        OPERATION: [
          {
            path: "/home/operation",
            title: "运营管理",
            icon: "icon-changguanyuyue",
            meta: {
              permission: ["01-02"]
            },
            isShow: false,
            children: [
              {
                path: "/home/operation/operation/list",
                route: "/home/operation/operation/",
                title: "运营管理",
                icon: "icon-sanjiaoxingcopy",
                isShow: false,
                meta: {
                  permission: ["01-02"]
                }
              }
            ]
          }
        ]
      };
      let path = this.$route.path;
      if (path.indexOf("/shop") > -1) {
        this.asideDataList = this.conListroles.SHOP;
      }
      if (path.indexOf("/system") > -1) {
        this.asideDataList = this.conListroles.SYSTEM;
      }
      if (path.indexOf("/menber") > -1) {
        this.asideDataList = this.conListroles.MENBER;
      }
      if (path.indexOf("/operation") > -1) {
        this.asideDataList = this.conListroles.OPERATION;
      }
    },
    /* router 处理  end */
    /* 权限过滤  start */
    filterAsyncRouter(asyncRouterMap, permissions) {
      let self = this;
      const accessedRouters = asyncRouterMap.filter(route => {
        if (self.hasPermission(permissions, route)) {
          if (route.children && route.children.length) {
            route.children = self.filterAsyncRouter(
              route.children,
              permissions
            );
          }
          return true;
        }
        return false;
      });
      return accessedRouters;
    },
    hasPermission(permissions, route) {
      if (route.meta && route.meta.permission) {
        return permissions.some(
          permission => route.meta.permission.indexOf(permission) >= 0
        );
      } else {
        return true;
      }
    },
    menuClick(val) {}
    /* 权限过滤  end */
  }
};
</script>
<style scoped>
.home_main_bd {
  width: calc(100%);
  height: calc(100%);
  overflow: hidden;
}
.home_aside {
  overflow: hidden;
  height: calc(100% - 1px);
  display: flex;
  justify-content: center;
}
.home_main {
  overflow: hidden;
  background: #f5f5f5;
  height: calc(100% - 1px);
  position: relative;
  width: calc(100% - 200px);
}

.home_ct {
  height: calc(100vh - 60px);
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.home_hd {
  height: 60px !important;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.home_box {
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}
</style>
